<template>
  <div class="index-page" v-if="login_user">
    <div class="index-top-warp">
      <indexTop :login_user="login_user"/>
    </div>
    <div class="index-left-warp">
      <indexLeft @clickMenu="addTab" :showMenu="tabActive"/>
    </div>
    <div class="index-content-warp">
      <el-tabs
        v-model="tabActive"
        type="card"
        class="index-content-tab"
        closable
        @tab-remove="removeTab"
      >
        <el-tab-pane
          v-for="(item, index) in tabContant"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <middleKey
            :componentName="item.componentsName"
            :queryMsg="item.queryMsg"
            @addTab="addTab"
          ></middleKey>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import indexTop from "../components/indexTop.vue"; //头部
import indexLeft from "../components/indexLeft.vue"; //左侧
import middleKey from "../components/middleKey.vue"; //中间件
export default {
  components: {
    indexTop,
    indexLeft,
    middleKey
  },
  data() {
    return {
      tabActive: "",
      tabContant: []
      // flag: false
    };
  },
  computed: {
    listId() {
      return this.$store.state.id;
    }
  },
  watch: {
    listId(old, newData) {
      let that = this;
      if (old != newData) {
        that.tabActive = "";
        that.tabContant = [];
        //0.1s后刷新  重新获取
        setTimeout(function() {
          let flag = that.urlPermissions().indexOf("workbanch");
          if (flag == "-1") {
            that.tabContant = [];
          } else {
            let targetName = {
              tabOptions: "workbanch_数据概况",
              queryMsg: { methods: "add" }
            };
            that.removeTab(targetName);
            that.addTab(targetName);
          }
        }, 100);
      }
    }
  },
  methods: {
    addTab(targetName) {
      let that = this;
      let obj = {
        name: targetName.tabOptions,
        title: targetName.tabOptions.split("_")[1],
        componentsName: targetName.tabOptions.split("_")[0],
        queryMsg: targetName.queryMsg ? targetName.queryMsg : null
      };
      //判断标签是否已经添加过
      let status = false;
      that.tabContant.forEach((tab, index) => {
        if (tab.name == obj.name) {
          status = true;
          return;
        }
      });
      //如果没有则添加
      if (!status) {
        that.tabContant.push(obj);
      }
      that.tabActive = obj.name;
    },
    removeTab(targetName) {
      let that = this;
      let tabs = that.tabContant;
      let activeName = that.tabActive;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      that.tabActive = activeName;
      that.tabContant = tabs.filter(tab => tab.name !== targetName);
      if (that.tabContant.length == 0) {
        that.tabActive = "";
      }
    }
  },
  created() {
    let that = this;
    that.login_user = that.localData("get", "login_user");
    if (!that.login_user) {
      that.logout();
    }
    if (that.login_user.supportApps.length != 0) {
      that.$store.dispatch("newAppId", that.login_user.supportApps[0].key);
    }
  },
  mounted() {
    let that = this;
    let flag = that.urlPermissions().indexOf("workbanch");
    if (flag == "-1") {
      that.tabContant = [];
    } else {
      let targetName = {
        tabOptions: "workbanch_数据概况",
        queryMsg: { methods: "add" }
      };
      that.addTab(targetName);
    }
  }
};
</script>
<style lang="less">
@import "../assets/less/public.less";
@top: 80px;
@left: 200px;
.index-page {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  .index-top-warp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: @top;
  }
  .index-left-warp {
    position: absolute;
    top: @top;
    width: @left;
    left: 0;
    bottom: 0;
    overflow-y: auto;
  }
  .index-content-warp {
    position: absolute;
    top: @top;
    left: @left;
    bottom: 0;
    right: 0;
    padding: 10px;
    background: #f6f6f6;
    .index-content-tab {
      height: 100%;
      position: relative;
      .el-tabs__header {
        position: absolute;
        width: 100%;
        background: #fff;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
      .el-tabs__content {
        position: absolute;
        top: 45px;
        bottom: 0;
        overflow: auto;
        width: 100%;
      }
    }
  }
}
</style>
